
.nav-explore-icon {
  display: inline-block;
  position: relative;
  width: 23px;
  height: 23px;
  background: url("/img/explore-logo-layer-0.png") no-repeat center center;
  background-size: contain;
  animation: nav-explore-icon-keyframes-container infinite 14.3s linear;
  vertical-align: text-bottom;
}

.nav-explore-icon:before {
  position: absolute;
  display: block;
  content: ' ';
  width: 22px;
  height: 22px;
  background: url("/img/explore-logo-layer-1.png") no-repeat center center;
  background-size: contain;
  left: 1px;
  top: 1px;
  animation: nav-explore-icon-keyframes-outer infinite 6s linear;
  transform-origin: center center;
  box-sizing: border-box;
  /*background-color: #794BC5a0;*/
}

.nav-explore-icon:after {
  position: absolute;
  display: block;
  content: ' ';
  width: 17px;
  height: 17px;
  background: url("/img/explore-logo-layer-2.png") no-repeat center center;
  background-size: contain;
  left: 2.5px;
  top: 2.5px;
  animation: nav-explore-icon-keyframes-inner infinite 8s linear;
  transform-origin: center center;
  box-sizing: border-box;
  /*background-color: #3D44FFa0;*/
}

@keyframes nav-explore-icon-keyframes-container {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

@keyframes nav-explore-icon-keyframes-outer {
  0% {
    transform: scale(0.8);
  }
  33% {
    transform: scale(1.2) rotate(-120deg);
  }
  66% {
    transform: scale(1.1) rotate(-240deg);
  }
  100% {
    transform: scale(0.8) rotate(-360deg);
  }
}

@keyframes nav-explore-icon-keyframes-inner {
  0% {
    opacity: 0.7;
    transform: scale(1.2);
  }
  33% {
    opacity: 0.8;
    transform: scale(0.9) rotate(120deg);
  }
  66% {
    opacity: 0.9;
    transform: scale(0.9) rotate(240deg);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.2) rotate(360deg);
  }
}
